# Preview Card

<Subtitle>
  A popup that appears when a link is hovered, showing a preview for sighted users.
</Subtitle>
<Meta
  name="description"
  content="A high-quality, unstyled React preview card component that appears when a link is hovered, showing a preview for sighted users."
/>

import { DemoPreviewCardHero } from './demos/hero';

<DemoPreviewCardHero />
<link
  as="image"
  rel="preload"
  href="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
/>

## Anatomy

Import the component and assemble its parts:

```jsx title="Anatomy"
import { PreviewCard } from '@base-ui-components/react/preview-card';

<PreviewCard.Root>
  <PreviewCard.Trigger />
  <PreviewCard.Portal>
    <PreviewCard.Backdrop />
    <PreviewCard.Positioner>
      <PreviewCard.Popup>
        <PreviewCard.Arrow />
      </PreviewCard.Popup>
    </PreviewCard.Positioner>
  </PreviewCard.Portal>
</PreviewCard.Root>;
```

## API reference

<Reference
  component="PreviewCard"
  parts="Root, Trigger, Portal, Backdrop, Positioner, Popup, Arrow"
/>
